<template>
	<view class="stores">
		<view class="h-[20rpx] bg-[#F5F5F5]">
		</view>
		<view class="px-[30rpx] pt-[30rpx]" v-for="(item,index) in addressList" :key="index">
			<view class="flex justify-between items-center">
				<!-- 左 -->
				<view class="">
					<view class="">
						<view class="type1">
							<text class="home mr-[10rpx]" v-if="item.lable == 3">学校</text>
							<text class="home1 mr-[10rpx]" v-if="item.lable == 1">家</text>
							<text class="home2 mr-[10rpx]" v-if="item.lable == 2">公司</text>
							<text class="font-[700]">
								{{item.address}}{{item.doorNum}}
							</text>
						</view>
					</view>
					<view class="mt-[10rpx] flex type2 ">
						<view class="mr-[20rpx]">
							{{item.realName}}
						</view>
						<view class="mr-[60rpx]">
							{{item.sex==1?'先生':'女士'}}
						</view>
						<view class="mr-[20rpx]">
							{{item.phone}}
						</view>
					</view>
				</view>
				<!-- 右 -->
				<view class="ml-[20rpx] ">
					<image @click="editaddress(item.id)" class="w-[40rpx] h-[40rpx]" src="@/static/my/address/edit.svg">
					</image>
				</view>
			</view>
			<u-line color="#efefef" margin="26rpx 0 0 0"></u-line>
		</view>
		<view class="h-[80vh] flex justify-center items-center flex-col" v-if="addressList.length<1">
			<view class="">
				<image class="w-[320rpx] h-[300rpx]" src="../../static/homeimg/datanull.png" mode="aspectFit">
				</image>
			</view>
			<view class="flex text-[30rpx] text-[#999] justify-center items-center">
				暂无数据
			</view>
		</view>
		<view class="h-[calc(var(--bottom-button-height)+5px)]"></view>
		<view @click="gonewAddress()" class="my-0  w-full fixed left-0 bottom-[60rpx] box-border bg-[#fff]">
			<view
				class="bg-[#FE861C] mx-[40rpx] rounded-[20rpx] h-[98rpx] flex justify-center items-center text-[#fff] text-[32rpx] font-[500]">
				新增收货地址
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		addreses
	} from '@/api/my.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'

	let userId = ref()
	onLoad((e) => {
		userId.value = e.id
	})
	onShow(() => {
		getaddressList()
	})
	//获取地址列表
	let addressList = ref([])
	let getaddressList = () => {
		addreses({
			userId: userId.value
		}).then(res => {
			if (res.code == 200) {
				addressList.value = res.result
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
			// console.log("res",res);
		})
	}

	let gonewAddress = () => {
		uni.navigateTo({
			url: '/page_my/address/newaddress/newaddress'
		})
	}
	let editaddress = (id) => {
		uni.navigateTo({
			url: '/page_my/address/editAddress/editAddress?id=' + id
		})
	}
</script>

<style lang="scss">
	.stores {
		--bottom-button-height: 60px;
	}

	page {
		background-color: #fff;
	}

	.type1 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #010101;
	}

	.type2 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #777777;
	}

	.home {
		width: 86rpx;
		height: 44rpx;
		line-height: 44rpx;
		background: #EFEDFC;
		border-radius: 10rpx;
		font-size: 28rpx;
		text-align: center;
		display: inline-block;
		font-family: PingFang SC;
		font-weight: 500;
		color: #472FE4;
	}

	.home1 {
		width: 62rpx;
		height: 44rpx;
		line-height: 44rpx;
		background: #FEEDE2;
		border-radius: 10rpx;
		display: inline-block;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF7216;
	}

	.home2 {
		width: 86rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 10rpx;
		text-align: center;
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #39B11A;
		background: #E4FFDD;
	}
</style>